<!--
@ 作者: 阿拉丁矿工 黄传鸿 <hchhyzc@foxmail.com>
-->
<template>
    <div class="h_layout_right" :style="{ 'width': rightFrameInfo.range + 'px' }">
        <div class="h_right_fold_button" v-if="rightFrameInfo.fold" @click="myStore.layoutHandel('RightFold')">➡️{{
            rightFrameInfo.label }}</div>
        <div class="h_right_fold_button" v-else @click="myStore.layoutHandel('RightFold')">⬅️
        </div>
        <div class="h_right_fold_frame">
            <NavigationRightFoldFrame v-if="rightFrameInfo.fold"></NavigationRightFoldFrame>
            <NavigationRightButton></NavigationRightButton>
        </div>
    </div>
</template>

<script setup  lang="ts">
/** ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
// 🐸 引入存储
/** ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
import { storeToRefs } from "pinia";
import { useEditorStore } from "@/store"; // 画布

/** ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
// 🐸 引入组件 
/** ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
import { NavigationRightButton } from "../NavigationRightButton";
import { NavigationRightFoldFrame } from "../NavigationRightFoldFrame";
/** ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
// 🐸 使用存储
/** ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
const myStore = useEditorStore(); // 画布
let { rightFrameInfo } = storeToRefs(myStore);


</script>

<style lang="scss" scoped>
.h_layout_right {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    height: 100%;
    border-left: 1px solid rgb(100, 100, 100);
}

.h_right_fold_button {
    width: 100%;
    height: 23px;
    margin-bottom: 1px;
    text-align: start;
    color: rgb(0, 255, 255);
    user-select: none;
    font-size: 16px;

    &:hover {
        margin-bottom: 0px;
        border-bottom: 1px solid rgb(100, 100, 100);
        color: rgb(255, 255, 255);
    }
}

.h_right_fold_frame {
    height: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
}
</style>@/store